<template>
  <view class="">
    <view class="header-nav" style="padding-top: 32rpx">
      <image
        src="/static/images/switch-device-type.png"
        class="eccchange-project-img"
        @click="showPopHandler"
      ></image>
      <text class="project-name">{{ currentDeviceType }}</text>
    </view>
    <wyb-popup ref="popup" type="top">
      <view class="project-pop-box">
        <view
          class=""
          v-for="(item, idx) in types"
          :key="idx"
          :class="[
            'project-item',
            currentDeviceType === item ? 'project-item-active' : '',
          ]"
          @click="selectProject(item)"
        >
          <view class="project-item-in">
            {{ item }}
          </view>
        </view>
      </view>
    </wyb-popup>
  </view>
</template>

<script>
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
import { mapState } from 'vuex'
export default {
  components: { wybPopup },
  props: {},
  data() {
    return {
      types: [
        '传感器',
        '电表',
        '水表',
        '灯',
        '多联机空调',
        '新风全热交换机',
        '新风空调一体机',
      ],
    }
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState({
      currentProject: (state) => state.project.project,
      currentDeviceType: (state) => state.device.currentDeviceType,
    }),
  },
  methods: {
    showPopHandler() {
      this.$refs.popup.show()
    },
    selectProject(item) {
      this.$store.commit('device/SET_DEVICE_TYPE', item)
      this.$refs.popup.hide()
    },
  },
}
</script>
<style lang="scss" scoped>
.header-nav {
  position: relative;
  text-align: center;
  line-height: 50rpx;
  margin-bottom: 20rpx;
  height: 50rpx;
  .eccchange-project-img {
    width: 34rpx;
    height: 34rpx;
    position: absolute;
    left: 0;
    top: 40rpx;
  }
  .project-name {
    color: #282a33;
    font-weight: bold;
    font-size: 36rpx;
  }
}
.project-pop-box {
  background-color: #fff;
  .project-item {
    padding: 0 32rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 500;
    color: #383c48;
    background-color: #fff;
  }
  .project-item-in {
    border-bottom: 1px solid rgba(220, 228, 245, 0.5);
  }
  .project-item-active {
    color: #0ac7b9;
    background-color: #d5f6f4;
  }
}
</style>
